<script>
import {getSipInfo} from "@/api/sip/sip";
export default {
  name: "gbinfo",
  data(){
    return{
      labelPosition: 'right',
      sip: {
      }
    }
  },
  methods:{
    sipInfo(){
      getSipInfo().then(resp=>{
        this.sip = resp.data
      })
    }
  },
  created() {
    this.sipInfo()
  }
}
</script>

<template>
  <div id="app-gb">
    <!-- 面包屑 -->
    <el-row>
      <el-col :span="23" :offset="1" style="margin-bottom: 30px;margin-top: 20px;">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/gb' }" class="bread"><i class="el-icon-location-outline"></i>系统管理</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/gb' }" class="bread">国标信息</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <!-- 标签页 -->
    <el-row type="flex" justify="center">
      <el-col :span="22">
        <div class="tab tabs-container" id="sip-box">
          <el-tabs class="el-tabs" stretch>
            <el-tab-pane label="sip信息" class="tab sip-info">
              <el-form :label-position="labelPosition" label-width="80px" :model="sip" class="sip-item">
                <el-form-item label="sipId">
                  <el-input v-model="sip.sipId" class="inputem" disabled/>
                </el-form-item>
                <el-form-item label="sip域">
                  <el-input v-model="sip.domain" class="inputem" disabled/>
                </el-form-item>
                <el-form-item label="sipIp">
                  <el-input v-model="sip.localIp" class="inputem" disabled/>
                </el-form-item>
                <el-form-item label="sip密码">
                  <el-input v-model="sip.sipPassword" class="inputem" disabled/>
                </el-form-item>
                <el-form-item label="sip端口">
                  <el-input v-model="sip.sipPort" class="inputem" disabled/>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="流媒体信息" class="tab">流媒体信息</el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.sip-info{
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;    /* 垂直居中 */
  height:100%;          /* 父容器的高度 */
}
.tabs-container {
  position: relative;
  z-index: 0; /* 确保 tabs 不是最顶层 */
}

.tabs-container ::v-deep .el-tabs {
  position: absolute; /* 绝对定位 */
  top: 0; /* 根据需要调整位置 */
  width: 100%;
  z-index: 1; /* 设置一个比其他内容高的 z-index */
}
.sip-item{
  width: 30%;
  height: 100%;
  margin-top: 30px;
}
.sip-item /deep/ .el-form-item__label{
  /* color: #f2f2f2; */
}
.bread /deep/ .el-breadcrumb__inner{
  /* color: #f2f2f2; */
}
/* .bread /deep/ .el-breadcrumb__inner:hover{color: #f2f2f2;} */
.el-row{
  margin-top:10px;
}
::v-deep .el-tabs__header{
  margin: 0px;
}
::v-deep .el-tabs__nav-scroll{
	width:50%;
	margin:0 auto;
}
::v-deep .el-tabs__item {
  color:#000000;
}
::v-deep .el-tabs__item.is-active {
  color: #31A1F9;
}
::v-deep .el-tabs__nav-wrap::after{
  height:1px;
  background-color: #265389;
}
.inputem /deep/ .el-input__inner {
  background-color: rgba(0, 0, 0, 0) ;
  border:1px solid #B1B4C5;
}
.inputem /deep/ .el-input__inner:focus{
  border:2px solid #4c87c2;
}
.inputem /deep/ .el-input__inner:hover{
  border:2px solid #4c87c2;
}

.inputem /deep/ .el-input-group__append{
  background-color: #265389;
  border:1px solid #265389;
}
</style>
